<template>
  <!-- chechout address -->
  <div class="checkout-address">
    <div class="title">
      {{ title }}
    </div>
    <div class="checkout-address-container">
      <div
        class="right-container"
        v-for="(item, index) in addressList"
        :key="item.id"
        :class="addressIndex === index ? 'active' : ''"
        @click="countryChange(item, index)"
      >
        <p>
          <span>{{ item.firstname }}</span>
          <span>{{ item.lastname }}</span>
        </p>
        <p>{{ item.street[0] }}</p>
        <p>
          <span>{{ item.city + "，" }}</span>
          <span>{{ item.region.region }}</span>
          <span>{{ item.postcode }}</span>
        </p>
        <p>{{ item.country_id }}</p>
        <p>{{ item.telephone }}</p>
      </div>
    </div>
    <div class="title">
      {{ addressMethods }}
    </div>
    <div class="bottom-container-view">
      <div
        v-for="(item, index) in methodList"
        :key="index"
        class="bottom-container"
      >
        <div class="left-ridao">
          <el-radio v-model="item.active"></el-radio>
        </div>
        <div class="center">
          <p>{{ item.method_title }}</p>
          <p>{{ item.carrier_title }}</p>
        </div>
        <div class="price-box">
          {{ "$" + item.amount }}
        </div>
      </div>
    </div>
    <div class="btn" @click="_click">
      Next
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
let axios = require("axios");
export default {
  name: "",
  props: [""],
  data() {
    return {
      title: "SHIPPING ADDRESS",
      addressMethods: "SHIPPING METHODS",
      info: {},
      emailShow: false,
      radio: false,
      methodList: [],
      addressIndex: -1,
      baseAddress: {},
      baseInfo: {}
    };
  },

  components: {},

  computed: {
    ...mapGetters(["addressList", "token", "addressInformation"]),
    isCity() {
      if (Array.prototype.isPrototypeOf(this.city) && this.city.length !== 0)
        return true;
      return false;
    }
  },

  beforeMount() {},

  mounted() {
    this.countryChange();
    this.countryChange(this.addressList[0], 0);
  },

  methods: {
    _click() {
      let obj = JSON.parse(JSON.stringify(this.addressInformation));
      obj.billing_address = {
        region: this.baseAddress.region.region,
        region_id: this.baseAddress.region.region_id,
        region_code: this.baseAddress.region.region_code,
        country_id: this.baseAddress.country_id,
        postcode: this.baseAddress.postcode,
        city: this.baseAddress.city,
        firstname: this.baseAddress.firstname,
        lastname: this.baseAddress.lastname,
        email: this.baseAddress.email,
        telephone: this.baseAddress.telephone,
        street: this.baseAddress.street
      };
      let data = JSON.stringify(obj);
      let config = {
        method: "post",
        url: "http://47.119.123.183/rest/V1/carts/mine/shipping-information",
        headers: {
          Authorization: "Bearer " + this.token,
          "Content-Type": "application/json"
        },
        data: data
      };
      axios(config)
        .then(function(response) {
					this.$emit("click", {
						payment_methods: response.data.payment_methods,
						index: 1
					});
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    async countryChange(row, index) {
      if (this.addressIndex === index) return;
      this.addressIndex = index;
      this.baseAddress = row;
      let data = JSON.stringify({ addressId: row.id });
      let config = {
        method: "post",
        url:
          "http://47.119.123.183/rest/V1/carts/mine/estimate-shipping-methods-by-address-id",
        headers: {
          Authorization: "Bearer " + this.token,
          "Content-Type": "application/json"
        },
        data: data
      };
      axios(config)
        .then(res => {
          let arry = JSON.parse(JSON.stringify(res.data));
          for (let i in arry) {
            arry[i].active = false;
            if (Number(i) === 0) {
              arry[i].active = true;
            }
          }
          this.methodList = arry;
          this.baseInfo = res.data[0];
        })
        .catch(() => {});
    }
  }
};
</script>
<style lang="scss" scoped>
.checkout-address {
  .title {
    color: #333;
    font-weight: 700;
    padding-bottom: 20px;
    margin-top: 20px;
  }
  .checkout-address-container {
    width: 280px;
    margin-top: 40px;
  }

  .bottom-container {
    display: flex;
    padding: 16px;
    border: 1px solid #e2e2e2;
    height: 60px;
    align-items: center;
    justify-content: space-between;
    p {
      margin: 0;
    }

    .center {
      width: calc(100% - 100px);
      cursor: pointer;
    }
  }

  .btn {
    color: #fff;
    height: 54px;
    line-height: 54px;
    text-align: center;
    border-radius: 5px;
    width: 280px;
    background: #1a1a1a;
    margin: 20px 0;
    cursor: pointer;
  }

  .right-container {
    cursor: pointer;
    border: 1px solid #ddd;
    padding: 15px 10px 7px;

    &.active {
      border-color: #233453;
    }
  }
}
</style>
